<style lang="less" scoped>
.buttonBox {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10%;
  button {
    margin-right: 10px;
    width: 100px;
    text-align: center;
  }
  &:nth-last-of-type(button) {
    margin: 0;
  }
}
</style>

<template>
  <div>
    <div class="buttonBox">
      <button @click="showInput = !showInput">输入框</button>
      <button @click="showInputData = !showInputData">展示输入数据</button>
      <button @click="showTable = !showTable">表单</button>
      <button @click="showDetail = !showDetail">点击详情</button>
      <button @click="showCheckDetail = !showCheckDetail">生产状态</button>
      <button @click="setPostion">确定</button>
    </div>

    <!--  -->
    <myInput v-drag v-show="showInput"></myInput>
    <myShowInput v-drag v-show="showInputData"></myShowInput>
    <myTable v-drag v-show="showTable"></myTable>
    <myDetail v-drag v-show="showDetail"></myDetail>
    <myCheckDetail v-drag v-show="showCheckDetail"></myCheckDetail>
  </div>
</template>

<script>
import myTable from "../components/table";
import myDetail from "../components/detail";
import myInput from "../components/input";
import myShowInput from "../components/show_input";
import myCheckDetail from '../components/check_detail'
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      showTable: false,
      showDetail: false,
      showCheckDetail:false,
      showInput: false,
      showInputData: false,
    };
  },
  components: {
    myTable,
    myDetail,
    myInput,
    myShowInput,
    myCheckDetail,
  },
  methods: {
    ...mapMutations(['setMyInput']),
    ...mapMutations(['setMyShowInput']),
    ...mapMutations(['setMyTable']),
    ...mapMutations(['setMyDetail']),
    ...mapMutations(['setMyCheckDetail']),
    /* 
       记录组件的位置
       use:boolean 是否使用这个组件
       className:String 组件的类名
       funcName:function 修改数据的mutation方法
    */
    setComponentPostion(use,className,funcName) {
      if (use) {
        let dom = document.querySelector(className);
        let x = dom.style.left;
        let y = dom.style.top;
        // let postion = {x:x,y:y};
        if(x && y){
            funcName({x:x,y:y})
        }

      }
    },
    setPostion(){
        this.setComponentPostion(this.showInput,'.input',this.setMyInput)
        this.setComponentPostion(this.showInputData,'.show_input',this.setMyShowInput)
        this.setComponentPostion(this.showTable,'.table',this.setMyTable)
        this.setComponentPostion(this.showDetail,'.detail',this.setMyDetail)
        this.setComponentPostion(this.showCheckDetail,'.check_detail',this.setMyCheckDetail)
        this.$router.push('/show')
    }
  },
  //生命周期 - 创建完成
  created() {},
  //DOM挂载完毕
  mounted() {},
};
</script>
